<template lang="">

 <!-- 发布 -->
 <el-form :model="form" label-width="auto" style="max-width: 600px">
   <el-form-item label="提示信息" required>
     <el-input v-model="form.alt" maxlength="50" clearable />
   </el-form-item>
   <el-form-item label="链接地址" required>
     <el-input v-model="form.link" maxlength="50" clearable  />
   </el-form-item>

   <el-form-item label="上传图片">
     <el-upload
       v-model:file-list="fileList"
       action="http://localhost:3001/admin/file/upload"
       list-type="picture-card"
       :on-preview="handlePictureCardPreview"
       :on-remove="handleRemove"
       :limit="1"
       name="img"
       :on-success="uploadSuccess"
     >
       <el-icon><Plus /></el-icon>
     </el-upload>
     <!-- 预览图片 -->
     <el-dialog v-model="dialogVisible">
       <img w-full :src="dialogImageUrl" alt="预览图片" />
     </el-dialog>
   </el-form-item>

   <el-form-item>
     <el-button type="primary" @click="onsubmit">发布</el-button>
     <el-button>重置</el-button>
   </el-form-item>
 </el-form>
</template>
<script>
import {  bannerAddRequest} from "@/api/banner"
import { ElMessage } from "element-plus"
export default {
 data(){
   return{
     imgss:[],
     dialogVisible: false,
     dialogImageUrl: "",
     fileList: [],
     form:{
       alt:"",
       link:"",
     }
   }
 },
 methods:{
   handlePictureCardPreview(item){
     this.dialogImageUrl = item.url
     this.dialogVisible = true
     console.log(item);
   },
   handleRemove() {
     console.log(this.fileList);
   },
   uploadSuccess(e) {
     // 服务器返回的数据
     console.log(e)
     console.log(this.fileList)
   },
   async onsubmit(){
     console.log(1);
     console.log(this.form);
     this.fileList.forEach((v,i)=>{
       console.log(v.response.fileUrl, i)
       this.form["img"] = v.response.fileUrl
     })
     let r=await bannerAddRequest(this.form)
     console.log(r);
     if(r.data.code == 200){
       ElMessage({
         type:"success",
         message:r.data.message
       })
       this.fileList=[]
       this.form.alt=""
       this.form.link=""
       this.dialogImageUrl=""
     }else{
       ElMessage({
         type:"error",
         message:r.data.message
       })
     }
   },

 },
 mounted() {

 }
}
</script>
<style lang="">
 
</style>